<template>
  <div class="container">
    <!-- 需要配置看这里 -->
    <!-- https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v3.html -->
    <!-- <ckeditor class="ckeditor_wrap"  @ready="onReady" :editor="editor" v-model="value.value" :config="editorConfig"></ckeditor> -->
    <div id="editor" ref="editor">
      
    </div>
   
  </div>
</template>
<script lang="ts">
export default {
  name: 'cust-editor'
}
</script>
<script setup lang="ts">
import {  onMounted, ref } from "vue";

import { uploadUrl } from "@/config/api/common/api";
import { useUserStoreWithOut } from "@/store/modules/user";

let props = defineProps<{ value: any, initData?:any,}>();
const emit = defineEmits([ "update:value","change"]);

const userStore = useUserStoreWithOut();
let accessToken: any = userStore.getToken;

let editor5:any;


//配置文档
//https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
let editorConfig:any = Object.assign({
  // plugins: [ SimpleUploadAdapter ],
  height: 400,
  language: 'zh-cn',
  // simpleUpload: {
  //   uploadUrl: uploadUrl,
  //   headers: {
  //       'X-CSRF-TOKEN': 'CSRF-Token',
  //       token: accessToken
  //   }
  // },
  // extraPlugins:[ UploadAdapterPlugin  ],
  ckfinder: {
    uploadUrl: uploadUrl
  },
  toolbar: {
    shouldNotGroupWhenFull: true
  },
  placeholder: '请输入',
},props.initData || {}) ;
const editor = ref();

const init = () => {
  // setTimeout(()=>{
  //   ClassicEditor.create(document.querySelector('#editor'), editorConfig).then((editor )=>{
  //     editor5 = editor; 
  //     editor5.model.document.on('change:data', (e) => {
  //       console.log('值有变吗',editor.getData());
  //       emit('change', editor.getData());
  //       emit('update:value', editor.getData());
  //     })
  //   }).catch(error => {
  //     console.error(error)
  //   })
  // });
}

onMounted(() => {
  console.log('编辑器初始化');
  init();
})

defineExpose({
    init
})

</script>
  



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url('./ckeditor.component.less');
</style>
